<template>
  <draggable-container ref="draggableContainer">
    <draggable-child
      v-for="item in initialChildren"
      :key="item.id"
      :id="item.id"
      :width="item.width"
      :height="item.height"
      @stop="handleStop"
      @start="handleStart"
      @drag="handleDrag"
      @resize="handleResize"
      :default-position="item.position"
    >
      <div class="drag-item_container">
        <Input
          v-model="value"
          :readonly="true"
          v-if="item.code == 'Input'"
          placeholder="Enter something..."
          :style="{ width: `${item.width - 20}px` }"
        />
        <Table
          v-else-if="item.code == 'Table'"
          :columns="item.props.columns1"
          :data="item.props.data1"
        ></Table>
      </div>
    </draggable-child>
  </draggable-container>
</template>

<script>
export default {
  name: "dragComponent",
  props: {
    initialChildren: [],
  },
  data() {
    return {
      value: "",
      draggableContainerHeight: 300,
      draggableContainerWidth: 300,
      // initialChildren: [
      //   // { id: 1, background: "#8ce8df", width: 200, height: 50, position: { x: 100, y: 10 } },
      //   // { id: 2, background: "#8ce8df", width: 200, height: 50, position: { x: 400, y: 106 } },
      //   // { id: 3, background: "#d2aff6", width: 200, height: 50, position: { x: 100, y: 316 } },
      //   // { id: 4, background: "#fee493", width: 200, height: 50, position: { x: 480, y: 376 } },
      // ],
    };
  },
  mounted() {
    const { offsetHeight, offsetWidth } = this.$refs.draggableContainer.$;
    this.draggableContainerHeight = offsetHeight
    this.draggableContainerWidth = offsetWidth
  },
  methods: {
    handleResize(e) {
      console.log(e, "handleResize");
    },
    handleDrag(e) {
      console.log(e);
    },
    handleStop(e) {
      console.log(e, "handleStop");
    },
    handleStart() {
      console.log("开始");
    },
    handleClick() {
      alert(1);
    },
  },
};
</script>
